<template>
	<view class="page-mynews page">
		<view class="title">日期选择</view>
		<view class="tests">
			<view class="test">
				<text class="gs">当前日期：{{date}}</text>
					<button class="gsxz" type="primary" @click="onShowDatePicker('date')">选择日期</button>	
				<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			</view>
			    <view class="orderon"><view class="ch">车号：</view><input class="iputss" type="text" v-model="orderon"></view>
				<button class="buts" type="button" @click="seachs()">搜索</button>
				<button class="buts" type="button" @click="init()">取消搜索</button>
		</view>	
		
	
		<view class="butts">	
			<view class="card-item df" v-for="(item,index) in list" >
				<view class="mag-left" @click="toDetail(item)">
					              <view style="margin-right:25rpx" >委托单号：{{item.orderon}}</view>
					              <view style="margin-right:25rpx">车牌过磅班次：{{item.times}}-- {{item.datelist.name1}}-{{item.datelist.name2}}</view>
					              <view style="margin-right:25rpx" >车牌：{{item.cp}}</view>
					              <view style="margin-right:25rpx">司机：{{item.cname}}</view>
					              <view style="margin-right:25rpx">过磅车队：{{item.cdname}}</view>
					              <view style="margin-right:25rpx">货名：{{item.hname}}</view>
					               <view style="margin-right:25rpx">件数：{{item.num}}</view>
					              <view style="margin-right:25rpx">毛重时间{{item.mztime}}</view>
					              <view style="margin-right:25rpx">毛重：{{item.mz}} </view>
					              <view style="margin-right:25rpx">皮重：{{item.pz}} </view>
								 <view style="margin-right:25rpx"> 皮重时间{{item.pztime}}</view>
					              <view style="margin-right:25rpx">净重：{{item.jz}}</view>
					              <view style="margin-right:25rpx">洗车费：{{item.pic}}</view>
					
				</view>
				<view class="mag-left">
					
				<!-- 	<span v-if="item.status==1"  class="fz28 fw-b mb-24" @click="nofyuan(item.id)">退款</span>
					<span v-if="item.status==2"  class="fz28 fw-b mb-24" >已退款</span> -->
				</view>
			</view>
			<view>记录数：{{list.length}}  总净重：{{jz}}  总洗车费：{{xcf}} </view>
			  
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "../../components/mx-datepicker/mx-datepicker.vue";
	export default {
		data() {
			return {
				current:1,
				list:[],
				jz:'',
				xcf:'',
				orderon:'',
				date: new Date().toISOString().slice(0, 10),
				value: '',
				showPicker: false,
				type: 'rangetime',
			}
		},
		created() {
			this.init()
		},
		methods: {
			onShowDatePicker(type){//显示
					this.type = type;
					this.showPicker = true;
					this.value = this[type];
				},
			onSelected(e) {
				this.showPicker = false;
				if(e) {
					console.log(111)
					this[this.type] = e.value; 
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				
					this.seachs();
					
				}
			},
			toDetail(data) {
				console.log(data)
				uni.navigateTo({
					url:'/pages/editNews/editNews?id='+data.id
				})
			},
			async seachs(){
				let data =  {
					orderon:this.orderon,
					uid:uni.getStorageSync('uid'),
					times:this.date
				}
				let res = await this.$api.gbljlist(data)
				this.list = res.data.data
				this.xcf = res.data.xcf
				this.jz = res.data.jz
			},
			async init() {
				let data =  {
					uid:uni.getStorageSync('uid')
				}
				let res = await this.$api.gbljlist(data)
				this.list = res.data.data
				this.xcf = res.data.xcf
				this.jz = res.data.jz
			},
	
			async nofyuan(id){
				let res = await this.$api.tkuan(id)
				if(res.data.code==0){
					uni.showToast({
					  title:  res.data.msg,	
					  icon:'none',
					  duration: 2000
					});
						this.init()
				}else{
					uni.showToast({
					  title: res.data.msg,	
					  icon:'none',
					  duration: 2000
					});
				}	
			}
		},
		components: {
			MxDatePicker
		}
	}
</script>

<style lang="scss">
	.title{
		font-size: 20px;
		font-weight: 700;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	.tests{
		margin-top: 15px;
		margin-bottom: 15px;
		height: 60px;
	}
	.test{
		overflow: hidden;
		line-height: 60px;
		
	}
	.gs{
		font-size: 18px;
		font-weight: 700;
		float: left;
	
	}
	.gsxz{
		width: 60px;
		float: left;
		height: 30px;
		font-size: 10px;
		margin: auto 10px;
		margin-top: 14px;
	}
	.orderon{
		overflow: hidden;
		width: 100%;
	}
	.ch{
		float: left;
	}
	.iputss{
		border: 1px solid #B2B2B2;
		width: 120px;
		float: left;
	}
	
	
	.butts{
		margin-top: 150upx;
	}
	.buts{
		width: 120px;
		float: left;
		height: 30px;
		font-size: 10px;
		margin: auto 10px;
		margin-top: 14px;
	}
.page-mynews {
	background-color: #fff;
	.tab-item {
		flex:0 0 50%;
		text-align: center;
		padding: 20px 0;
		
		&.active {
			color: #f33333;
		}
	}
	.card-item {
		width: 100%;
		padding:20upx 25upx;
		background-color: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
		image {
			width: 190upx;
			height: 146upx;
			margin-right: 34upx;
			border: 1upx solid #666666;
		}
	}
	.mag-left{
		margin-left: 40upx;
	}
}
</style>
